<template>
  <div class="home_index">
    <div class="home-top">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in banner" :key="index"
          ><img :src="item.picUrl" alt=""
        /></van-swipe-item>
      </van-swipe>
      <ul class="he_tp_bt">
        <li>
          <img src="../../assets/img/love.png" alt="" />
          <p>签到</p>
        </li>
        <li>
          <img src="../../assets/img/lv.png" alt="" />
          <p>礼券</p>
        </li>
        <li>
          <img src="../../assets/img/wg.png" alt="" />
          <p>砍价</p>
        </li>
        <li>
          <img src="../../assets/img/dp.png" alt="" />
          <p>专栏</p>
        </li>
      </ul>
    </div>
    <cart-title>全民砍价</cart-title>
    <cart-title>精选专题</cart-title>
    <div class="news_count">
      <ul>
        <li v-for="(item, index) in newsList" :key="index">
          <img :src="item.pic" alt="" />
          <b>{{ item.title }}</b>
          <p>{{ item.descript }}</p>
        </li>
      </ul>
    </div>
    <cart-title @click="$router.push('/peopleList')">人气推荐</cart-title>
    <div class="people_count">
       <people-cart class="pe_ct_it" :objItem="item" v-for="(item,index) in goods" :key="index"></people-cart>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { getBanner, getNewsList,getGoods } from "../../api/home/home";
import cartTitle from "../../components/cartTitle.vue";
import peopleCart from '../../components/peopleCart.vue'
export default {
  components: { cartTitle,peopleCart },
  setup() {
    const data = reactive({
      banner: [], // 轮播图的数据
      newsList: [], // 新闻列表
      goods: [], // 人气推荐的数据
    });
    getBanner().then((res) => {
      // console.log(res);
      data.banner = res.data;
    });
    getNewsList().then((res) => {
      data.newsList = res.data;
    });
    getGoods().then(res => {
      data.goods = res.data.splice(9,4);
    })
    return {
      ...toRefs(data),
    };
  },
};
</script>
<style lang="scss" scoped>
.home_index {
  background: #e9e9e9;
  .home-top {
    position: relative;
  }
  .he_tp_bt {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 20% 20% 0 0;
    background: #fff;
    li {
      width: 25%;
      text-align: center;
      font-size: 32px;
      display: inline-flex;
      flex-wrap: wrap;
      img {
        width: 50%;
        margin: 0 auto 20px;
      }
      p {
        width: 100%;
        align-self: flex-end;
      }
    }
  }
  .my-swipe {
    img {
      width: 100%;
    }
  }
}
.news_count {
  width: 100%;
  overflow-x: auto;
  ul {
    display: flex;
    font-size: 24px;
    background: #fff;
    width: calc(660px * 5);
    li {
      margin-left: 20px;
      width: 640px;
      // padding: 0 10px;
      box-sizing: border-box;
      p {
        width: 100%;
        color: #a8a8a8;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 30px;
        padding-bottom: 20px;
      }
    }
    img {
      width: 640px;
      height: 410px;
      border-radius: 10px;
    }
  }
}
.people_count{
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  justify-content: space-around;
  background: #fff;
  .pe_ct_it{
    width: 48%;
  }
}
</style>